<template>
  <div class="_wz_layout_main">
    <Layout>
      <Header class="layout-header" style="display: flex; padding:0 14px;justify-content: space-between;">
       <div style="display: flex;">
         <div @click="returnKanban">
           <div style="font-size: 22px;letter-spacing: 2px;color: #fff;float: left;display: flex;align-items: center;width: auto;cursor: pointer;">
             <img src="../assets/logo.png" style="height: 32px;"/>
             <div style="color: #fff;display: inline-block;line-height: 64px;font-size: 20px;letter-spacing: 2px;padding: 0 0 0 10px;white-space:nowrap;">{{ !!userInfo && !!userInfo.deptName ? userInfo.deptName : ''}}交通运输综合监测平台 </div>
           </div>
         </div>
<!--         <wzMenu/>-->




         <div class="_wz_main_menuList">
           <template v-for="item in menuList">
             <div :class="{'_wz_main_menuList_select' : item.id == parentMenu}" @click="parentMenuJump(item)">{{item.name}}</div>
           </template>
         </div>
       </div>



        <div style="display: flex;">
          <div class="layout-nav" style="overflow: hidden;">
<!--            <Tooltip content="返回菜单" style="margin: 0 10px;vertical-align: middle;height: 60px;overflow: hidden;line-height: 60px;cursor: pointer;">-->
<!--              <Icon type="ios-options" @click="menuJump('/menuHome')" style="font-size: 23px;"/>-->
<!--            </Tooltip>-->
            <Tooltip :content="fullScreen ? '退出全屏' : '全屏'" style="margin: 0 10px;vertical-align: middle;height: 60px;overflow: hidden;line-height: 60px;cursor: pointer;">
              <Icon :type="fullScreen ? 'md-contract' : 'md-expand'" style="font-size: 23px;" @click="handleFullscreen" />
            </Tooltip>

            <template v-if="!userInfo.avatar">
              <Avatar icon="ios-person" size="small" style="margin: 0 10px 0 0;" />
            </template>
            <Avatar v-else :src="!!userInfo.avatar ? 'data:image/jpg;base64,' + userInfo.avatar : 'img/boy-avatar.jpg'" size="small"  style="margin: 0 10px 0 0;"/>

            <Dropdown @on-click="changeMenu" style="vertical-align: middle;">
              <a href="javascript:void(0)" class="user-avatar-dropdown">
                <div class="ivu-dropdown-rel">
                  <span class="ivu-badge">
                    <span class="ivu-avatar-circle ivu-avatar-default ivu-avatar-image" style="white-space:nowrap;max-width: 120px;display: inline-block;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;vertical-align: middle;">
                      {{ !!userInfo && !!userInfo.name ? userInfo.name : '系统用户'}}
                    </span>
                  </span>
                  <i class="ivu-icon ivu-icon-md-arrow-dropdown" style="font-size: 18px;"></i>
                </div>
              </a>
              <template #list>
                <DropdownMenu>
                  <DropdownItem name="personalSettings">个人设置</DropdownItem>
                  <DropdownItem name="modifyPassword">修改密码</DropdownItem>
                  <DropdownItem name="logOff">退出登录</DropdownItem>
                </DropdownMenu>
              </template>
            </Dropdown>
          </div>
        </div>
      </Header>
      <Layout style="height: calc(100% - 64px - 30px);">
        <Sider style="width: 140px;height: 100%;overflow: hidden; min-width: 140px;max-width: 140px;flex: 0 0 140px;">
<!--          <iviewNav />-->
          <wzSubmenu/>
        </Sider>
        <Layout>
          <Content style="height: 100%;">
            <keep-alive>
              <router-view></router-view>
            </keep-alive>
          </Content>
        </Layout>
      </Layout>


      <div class="_wz_foot">
        <span style="margin: 0px 5px;">
          <img src="../assets/fbc3f9cd07cbbca6b965bfd7f7537c7.png">
          <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=13050902000113" style="color: rgb(147, 147, 147);">冀公网安备 13050902000113号</a>
        </span>
        <span style="margin: 0px 5px;">
          <a href="https://beian.miit.gov.cn/" target="_blank" style="color: rgb(147, 147, 147);"> 冀ICP备18004049号 </a>
        </span>
      </div>

    </Layout>


<!--    <Drawer title="个人设置" v-model="formOperation" width="600" :mask-closable="false" :draggable="true" :styles="formOperationStyles">-->
<!--      <personalSettings v-if="formOperation"></personalSettings>-->
<!--    </Drawer>-->

  <!--    个人设置-->
    <Modal v-model="formOperation" title="个人设置" :mask-closable="false" :footer-hide="true" width="500">
      <personalSettings v-if="formOperation" @closeFun="formOperation = false;getUserInfo()"></personalSettings>
    </Modal>



    <!-- 修改密码 -->

    <Modal v-model="modifyPassword" title="修改密码" :mask-closable="false" :footer-hide="true" width="500">
      <changePassword v-if="modifyPassword" @closeFun="modifyPassword = false"></changePassword>
    </Modal>


  </div>
</template>

<script>


import {getCurrentInstance,inject,nextTick,reactive, toRefs,toRef,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted, ref,defineComponent,toRaw,watch} from 'vue'
import { useRouter,useRoute } from "vue-router";//路由使用
import personalSettings from "@/views/userSetUp/personalSettings.vue";//个人设置
import changePassword from "@/views/userSetUp/changePassword.vue"
import wzMenu from "../views/menu.vue";//菜单
import iviewNav from "../views/iviewNav.vue";//菜单
import wzSubmenu from "../views/wzSubmenu.vue";//菜单


import { useMainStore } from '../store'  //pinia 使用 类似 vuex
import { storeToRefs } from 'pinia'
import {getFirstMenu} from "@/router/dynamicRouting";
import {getMenu} from "@/util/getMenu";
//pinia 使用 类似 vuex
const mainStore = useMainStore() //pinia 使用 类似 vuex

//企业简介
//reactive
export default defineComponent({
  name: 'main',//组件名称
  components: {
    wzMenu,//菜单
    iviewNav,//菜单
    wzSubmenu,//菜单
    personalSettings,//个人设置
    changePassword,//修改密码
  },//组件引用
  setup () {


    const apiUrl = inject('$apiUrl'); // 变量全局化 后台地址
    const $axios = inject('$axiosInterceptor');// 变量全局化 axios
    const $ViewUIPlus = inject('$ViewUIPlus');//引用全局组件
    const $common = inject('$common');//引用全局组件
    const router = useRouter();//路由跳转使用



    //用户数据
    const { userData,parentMenu} = storeToRefs(mainStore)
    // //监听
    // watch(userData,(news, old) => {
    //   //重新获取用户数据
    //   getUserInfo()
    // },{deep: true});



    //监听
    watch(() => router,(news, old) => {
      state.wzNavName = router.currentRoute.value.name;
    },{deep: true});


    const state = reactive({
      fullScreen: false,//全屏状态
      userInfo:{},//用户数据
      formOperationStyles: {//表单左侧移出css
        padding: '0px',
      },
      formOperation:false,//抽屉状态
      modifyPassword:false,//修改密码 弹框使用
      coordinateData:[],//车站数据
      wzNavName:'',
      menuList:[],//菜单数据
    });

    //重新获取用户数据
    const getUserInfo = ()=>{
      //用户信息
      $axios.post(apiUrl.systemLoginUserInfo).then(async(res) => {
        let loginData = JSON.parse(sessionStorage.getItem("loginData"));
        loginData.userInfo = res.data.data;
        sessionStorage.setItem("loginData", JSON.stringify(loginData));
        mainStore.userData = loginData;//用户数据
        state.userInfo = res.data.data;

      }).catch((err) => {
        console.log("失败", err)
      })
    }




    //全屏
    const handleFullscreen = ()=>{
      let main = document.body
      if (state.fullScreen) {
        if (document.exitFullscreen) {
          document.exitFullscreen()
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen()
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen()
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen()
        }
        state.fullScreen = false;
      } else {
        if (main.requestFullscreen) {
          main.requestFullscreen()
        } else if (main.mozRequestFullScreen) {
          main.mozRequestFullScreen()
        } else if (main.webkitRequestFullScreen) {
          main.webkitRequestFullScreen()
        } else if (main.msRequestFullscreen) {
          main.msRequestFullscreen()
        }
        state.fullScreen = true;
      }
    }




    //右上角操作
    const changeMenu = (name)=>{


      if (name == "personalSettings") {//个人设置
        state.formOperation = true;

      } else if (name == "modifyPassword") {//修改密码
        state.modifyPassword = true;
      } else if (name == "logOff") {//退出登录
        var data = sessionStorage.getItem("loginData") ? JSON.parse(sessionStorage.getItem("loginData")) :'';
        let formData = new FormData();
        for (let key in data) {
          formData.append(key, data[key]);
        }
        $axios.post(apiUrl.ssoLogout,formData, {headers: {"Content-Type": "application/x-www-form-urlencoded"}}).then((res) => {
          if(!!res){
            state.formData = res.data.data;
          }
        }).catch((err) => {
          console.log("失败", err)
        })

        sessionStorage.clear();// 删除所有数据
        router.push({ path: '/', query: {}})
      }

    }

    //返回看板
    const returnKanban = async()=>{
      router.push({ path:  await getFirstMenu((JSON.parse(sessionStorage.getItem('loginData')).userMenu.modules[0].menus).filter(item => !!item.menuHide)), query: {}})

    }


    //路由跳转
    const menuJump = (data)=> {
      router.push({ path:data, query: {}})
    }



    //祖级路由跳转
    const parentMenuJump = (data)=>{

      let menuData = getFirstMenu(data.children)

      if(!!menuData.target){
        //target 打开方式
        //  _blank:外部链接   _innerblank:外部打开内部路由
        if(menuData.target == '_blank'){
          window.open(menuData.menuUrl, '_blank')
        }else{
          window.open('#/' + menuData.menuUrl, '_blank')
        }
      }else{
        router.push({ path:'/' + menuData.menuUrl, query: {}})
      }
    }

    const getFirstMenu = (data)=> {
      for (let i = 0; i < data.length; i++) {
        if(!!data[i].children && data[i].children.length > 0){
          return getFirstMenu(data[i].children)
        }else{
          return data[i];
        }
      }
    }

    // 其他的生命周期
    onBeforeMount (() => {//beforeMount挂载前状态 // console.log("App ===> 相当于 vue2.x 中 beforeMount")

    })
    onMounted (() => {//mounted 挂载结束状态  // console.log("App ===> 相当于 vue2.x 中 mounted")

      state.userInfo = userData.value.userInfo;
      state.wzNavName = router.currentRoute.value.name;



      state.menuList = (JSON.parse(sessionStorage.getItem('loginData')).userMenu.modules[0].menus).filter(item => !item.menuHide)
      console.log(state.menuList)
    })

    // 注意，onBeforeUpdate 和 onUpdated 里面不要修改值
    onBeforeUpdate (() => {//beforeUpdate 更新前状态 // console.log("App ===> 相当于 vue2.x 中 beforeUpdate")
    })

    onUpdated (() => {//updated 更新完成状态 // console.log("App ===> 相当于 vue2.x 中 updated")
    })

    onBeforeUnmount (() => {//beforeDestroy 销毁前状态  // console.log("App ===> 相当于 vue2.x 中 beforeDestroy")
    })

    onUnmounted (() => {//destroyed 销毁完成状态  // console.log("App ===> 相当于 vue2.x 中 destroyed")
    })

    return {
      ...toRefs(state),
      handleFullscreen,//全屏
      $common,//公共方法
      changeMenu,//右上角操作
      returnKanban,//返回看板
      userData,//用户全量数据
      getUserInfo,//获取用户数据
      menuJump,//路由跳转
      parentMenuJump,//祖级路由跳转
      parentMenu,
    }
  }
})


</script>
<style lang="less">
._wz_layout_main{
  position: relative;
  height: 100%;
  overflow: hidden;
  width: 100%;
  .ivu-layout{
    width: 100%;
    height: 100%;
    .layout-nav {
      text-align: right;
      //width: 420px;
      margin: 0 auto;
      margin-right: 0px;
      color: #fff;
      display: flex;
      justify-content: flex-end;
      align-items: center;

      .ivu-dropdown {
        text-align: left;
      }

      a {
        color: #fff;
      }

      .ivu-dropdown-menu a {
        color: #515a6e;
      }


    }
  }

  .ivu-layout-header{
    background: rgb(0,51,102);
  }

  .ivu-layout-footer{
    padding: 0px;
    text-align: center;
    line-height: 40px;
    height: 40px;
  }

  ._wz_home_top_time{
    color: #fff;
  }

  ._wz_main_select{
    .ivu-select-selection{
      border: 1px solid #fff;
      .ivu-select-arrow{
        color: #fff;
      }
      ivu-select-input::-webkit-input-placeholder {
        color: #f00;
      }
    }
  }


  ._wz_foot {
    z-index: 3;
    background: #fff;
    height: 30px;
    line-height: 30px;
    text-align: center;
    box-shadow: 0 1px 6px rgba(0, 0, 0, .2);
    overflow: hidden;
    color: rgba(0,0,0,.45);font-size: 14px;
    letter-spacing: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    span{
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  .ivu-layout-sider{
    background: #fff;
  }

  ._wz_main_menuList{
    display: flex;
    color: #fff;
    gap: 0px 8px;
    margin: 0 0 0 10px;
    div{
      cursor: pointer;
      color:#e1e1e1;
    }
    ._wz_main_menuList_select{
      color: #fff;
      font-weight: 900;
    }
  }
}

</style>
